<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载1</title>
</head>
<style>
    img{
        width:1200px;
        height:400px;
    }
</style>
<body>
    <!-- 
        原理：
            将页面上的图片的src属性设置为loading.gif 而图片的真实路径设置在data-src属性中
            页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的scr属性设置为data-src的值
            实现延迟加载
     -->
     <img scr="" data-src="../img/1.jpg">
     <img scr="" data-src="../img/2.jpg">
     <img scr="" data-src="../img/3.jpg">
     <img scr="" data-src="../img/4.jpg">
     <img scr="" data-src="../img/5.jpg">
     <img scr="" data-src="../img/6.jpg">


     <script>
        function lazyload() {
            const images = document.getElementsByTagName('img');
            let n = 0; // 存储图片加载到的位置 避免每次都从第一张图片开始遍历

            return function() {
                let viewHeight = document.documentElement.clientHeight;
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                for (let i = n; i < images.length; i++) {
                    if (images[i].offsetTop < viewHeight + scrollTop) {
                        if (images[i].getAttribute('src') === null) {
                            images[i].src = images[i].getAttribute('data-src');
                        };
                        n++;
                    };
                };
            };
        };

        let loadImages = lazyload();
        loadImages();   // 初始化首页的页面图片
        window.addEventListener('scroll', loadImages, false);


        /*
            性能问题： 懒加载被绑定在scroll事件上，当页面不断滑动时，事件就会频繁被触发
        */
     </script>
</body>
</html>